<template>
  <div class="detail-wrapper">
    <div class="header">
      <span class="name">{{ form.name }}（{{ form.code }}）</span>
      <el-tag :type="getDictStyle('inspection_status', form.status)">
        {{ getDictValue('inspection_status', form.status) }}
      </el-tag>
    </div>
    <Tabs
      @change="(val) => (currentComponentKey = val)"
      :currentKey="currentComponentKey"
      :tabsConfig="tabsConfig"
    />
    <!-- <span class="tip">应生成任务总数：{{ statisticData.totalTasks }}</span> -->
    <div class="detail">
      <InfoDetail v-show="currentComponentKey === 'detail'" :detail="form" />
      <TaskDetail ref="taskDetailRef" v-show="currentComponentKey === 'task'" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getPlanDetail } from '@/api/manager/inspectionManage/planManage.js'
import Tabs from '@/components/tabs/index.vue'
import InfoDetail from './components/infoDetail.vue'
import TaskDetail from './components/taskDetail.vue'
import { useRoute, useRouter } from 'vue-router'
import { useDict } from '@/hooks/useDict'
const { dict, getDictStyle, getDictValue } = useDict()

const router = useRouter()
const route = useRoute()
const form = ref({})
const tabsConfig = ref([
  {
    name: '巡检计划基本信息',
    value: 'detail',
  },
  {
    name: '巡检任务',
    value: 'task',
  },
])
const currentComponentKey = ref('detail')

const handleDetail = async () => {
  const res = await getPlanDetail({ pkid: route.query.pkid })
  form.value = { ...res.data }
}
onMounted(() => {
  if (route.query.pkid) {
    handleDetail()
  }
})
</script>

<style lang="scss" scoped>
.detail-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: 0 0 10px 0 rgba(72, 121, 238, 0.1);
  position: relative;
  .header {
    width: 100%;
    height: 54px;
    box-sizing: border-box;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    border-bottom: 1px solid #dee4ed;
    .el-tag {
      margin-left: 20px;
    }
  }
  .tabs-wrapper {
    box-shadow: none;
    background: #f3f7fe;
  }

  .detail {
    width: 100%;
    flex: 1;
    box-sizing: border-box;
    padding: 20px 30px;
    overflow-y: auto;
  }
}
</style>
